<%content_for :title do%><%= t("site.meta_title.overview") %><%end%>
<%content_for :keywords do%><%= t("site.current.keywords") %><%end%>
<%content_for :description do%><%= t("site.meta_desc.overview")%><%end%>

<% content_for :javascript do %>
  $("#i_overview li").click(function(){
    $("#i_overview li").removeClass("active");
    $(this).addClass("active");
  });
<% end %>

<section id="overview">
  <div class="icontitle">
    <h1><i class="fa fa-question-circle"></i>ViSH overview</h1>
  </div>
  <div class="whiteframe">
    <div class="overviewindex visible-desktop">
      <ul class="nav bs-docs-sidenav" id="i_overview">

        <a href="#overview">
          <li class="active">
            <i class="fa fa-angle-right"></i>
            <div class="index_title">Introduction to the ViSH</div>
            <div class="clear"></div>
          </li>
        </a>
        <a href="#overview2">
          <li>
            <i class="fa fa-angle-right"></i>
            <div class="index_title">The Community of ViSH registered users</div>
            <div class="clear"></div>
          </li>
        </a>
        <a href="#overview3">
          <li>
            <i class="fa fa-angle-right"></i>
            <div class="index_title">Creating virtual excursions with ViSH Editor</div>
            <div class="clear"></div>
          </li>
        </a>
        <a href="#overview4">
          <li>
            <i class="fa fa-angle-right"></i>
            <div class="index_title">Uploading resources from mobiles and tablets</div>
            <div class="clear"></div>
          </li>
        </a>
        <a href="#overview5">
          <li>
            <i class="fa fa-angle-right"></i>
            <div class="index_title">Cloning virtual excursions</div>
            <div class="clear"></div>
          </li>
        </a>
        <a href="#overview6">
          <li>
            <i class="fa fa-angle-right"></i>
            <div class="index_title">Importing and exporting excursions</div>
            <div class="clear"></div>
          </li>
        </a>
        <a href="#overview7">
          <li>
            <i class="fa fa-angle-right"></i>
            <div class="index_title">Virtual meetings and events with remote and mobile access</div>
            <div class="clear"></div>
          </li>
        </a>
      </ul>
      <hr>
      <a href="/user_manual">
        <button type="button" class="btn btn-default btn-md">
          Download as pdf
        </button>
      </a>
    </div>
    <div class="overviewmiddle visible-desktop">
    </div>
    <div class="overviewcontent">
      <legend>Introduction to the ViSH</legend>

      <div class="header_text margin-top10">
        <a target="_blank" href="<%= Vish::Application.config.full_domain %>">ViSH</a>
        is a social and collaborative site for creating knowledge resources for the realization of educational activities.
         The central element of the ViSH is the virtual excursion, a sequence of visits (enriched slides or viewgraphs), designed for projection in the classroom.
         Each excursion is a sequence of well-designed visual compositions (mash-up) of multimedia resources linked from the Internet,
         from the local ViSH repository or from other federated repositories. The name virtual excursion is a metaphor for an excursion in a virtual world of knowledge resources.
      </div>
      <br>
      <div class="header_text margin-top10">
        Excursions are public HTML5 web resources, accessible over the Internet by means of a URL, which can be projected in full screen format with a beamer to support classroom activities.
        Some examples of excursions are:
      </div>
      <br>
      <div class="header_text margin-top10">
        <ul>
          <a target="_blank" href="http://vishub.org/excursions/400">
            <li style="list-style: initial">Earth Layers Flashcard</li>
          </a>
          <a target="_blank" href="http://vishub.org/excursions/1012">
            <li style="list-style: initial">Curiosity Flashcard</li>
          </a>
          <a target="_blank" href="http://vishub.org/excursions/912">
            <li style="list-style: initial">Minerals - Amethyst</li>
          </a>
          <a target="_blank" href="http://vishub.org/excursions/560">
            <li style="list-style: initial">Higgs Particle</li>
          </a>
          <a target="_blank" href="http://vishub.org/excursions/1241">
            <li style="list-style: initial">Human Body 3D</li>
          </a>
          <a target="_blank" href="http://vishub.org/excursions/632">
            <li style="list-style: initial">Roman Villas in Spain (Spanish)</li>
          </a>
        </ul>
      </div>
      <br>

      <div class="header_text margin-top10">
        ViSH allows also the realization of collaborative activities and projects in the classroom involving teachers and students.
        The use of a shared account supervised by a teacher or tutor is recommended.
        For example the following excursion is the result of a real geology classroom project for mineral identification performed in a highschool in Galicia (Spain):
      </div>
      <br>

      <div class="header_text margin-top10">
        <ul>
          <a target="_blank" href="http://vishub.org/excursions/515">
            <li style="list-style: initial">Classroom project</li>
          </a>
          <a target="_blank" href="http://vishub.org/excursions/395">
            <li style="list-style: initial">Student work (Amatista in Spanish)</li>
          </a>
          <a target="_blank" href="http://vishub.org/excursions/912">
            <li style="list-style: initial">Student work translated to English</li>
          </a>
        </ul>
      </div>
      <br>

      <div class="header_text margin-top10">
        Excursions can be projected in a physical classroom in full-screen, like a slide or viewgraph presentation, but can be also:
      </div>
      <br>
      <div class="header_text margin-top10">
        <ul>
          <li style="list-style: initial">Viewed on browsers, smartphones, tablets or any HTML5 enabled device.</li>
          <li style="list-style: initial">Embedded in Web pages or LMSs (Moodle, ..) like YouTube videos.</li>
          <li style="list-style: initial">Projected in the ViSH virtual classroom, based on<a target="_blank" href="http://www.mashme.tv"> MashMe.tv</a>.</li>
          <li style="list-style: initial">Exported as a SCORM package to be imported elsewhere.</li>
          <li style="list-style: initial">Downloaded for off-line presentation in a classroom or meeting (under development).</li>
          <li style="list-style: initial">Cloned and modified or enriched by any other member of the community.</li>
        </ul>
      </div>
      <br>

      <div id="overview2" class="header_text margin-top10">
        Excursions can be added to a
        <a target="_blank" href="<%= Vish::Application.config.full_domain %>/search?catalogue=true">catalogue</a>
        where they appear classified by topic. The initial focus of the ViSH was on science, but it is being used now in many other areas.
      </div>
      <br>

      <div class="header_text margin-top10">
        <br>
        <legend>The Community of ViSH registered users</legend>
      </div>
      <div class="header_text margin-top10">
        Excursions are public objects, which can be freely reused in the classroom, blogs or LMSs by any person having access to the ViSH with a standard Internet access.
        But to create or modify excursions a user must register in the ViSH and become a member of the community.
        <a target="_blank" href="<%= Vish::Application.config.full_domain %>/terms_of_use">The ViSH terms of use</a>
        must be accepted to obtain an account.
      </div>
      <br>

      <div class="header_text margin-top10">
        Each account has a profile containing:
      </div>
      <br>

      <div class="header_text margin-top10">
        <ul>
          <li style="list-style: initial">The excursions created from scratch with the editor or the excursions cloned from other ViSH users and possibly edited afterwards.</li>
          <li style="list-style: initial">The resources uploaded by the user in the ViSH repository, possibly as components of excursions. Pictures, videos or animations used in excursions can be uploaded in the repository or linked from the Internet.</li>
          <li style="list-style: initial">The categories to classify excursions according to user needs. Categories act as personal folders or directories of related content. The favorites category contains excursions marked as favorite.</li>
          <li style="list-style: initial">The events created by the user.</li>
          <li style="list-style: initial">The user's contacts.</li>
        </ul>
      </div>
      <br>
      <div class="header_text margin-top10">
        ViSH is a social site where users can follow other users in order to receive information about the excursions they produce.
        The home of a user shows the excursions created by the users followed by him.
      </div>
      <br>
      <div class="header_text margin-top10">
        In addition, a recommender system will highlight the most relevant content in the ViSH related with the type of content accessed, when excursions are viewed.
        For a registered user his profile is also taken into account in the recommendation.
      </div>
      <br>
      <div id="overview3" class="header_text margin-top10">
        Each resource supports spam or content error notifications,
        which provide the basis for the control of the adequacy of excursions with the aims of the terms of use of the ViSH: useful, correct and good quality content.
      </div>
      <br>

      <div class="header_text margin-top10">
        <br>
        <legend>Creating virtual excursions with the excursion editor</legend>
      </div>
      <div class="header_text margin-top10">
        Registered users can create excursions with the online editor.
        The editor is easy to use and does not require technical skills. A user can edit only the excursions he has created or cloned.
      </div>
      <br>

      <div class="header_text margin-top10">
        Each virtual excursion is organized as a sequence of slides, with a standard slide or viewgraph format, where each can be one of the following elements:
      </div>
      <br>
      <ul>
        <li style="list-style: initial">
          <span class="editor_title_bold">Visual mash-up.</span>
          Template based visual composition of text, pictures, videos,
          <a target="_blank" href="http://vishub.org/categories/64">audio records</a>,
          <a target="_blank" href="http://vishub.org/categories/65">interactive apps</a>,
          <a target="_blank" href="http://vishub.org/categories/62">3D objects</a>,
          <a target="_blank" href="http://vishub.org/categories/63">simulations</a>,
          etc. The visual components included can be hosted in the local ViSH repository or in any server on the Internet.
        </li>
        <br>
        <li style="list-style: initial">
          <span class="editor_title_bold">Quiz.</span>
          An interactive slide designed to present a question or exercise to be answered in real time in a classroom from desktop, smartphones or tablets.
          <a target="_blank" href="http://vishub.org/categories/61">(Quizzes examples)</a>
          . True/false and multiple-choice is supported. Self evaluation or mobile, tablet PC based audience response system (ARS) can be added to the a quiz.
        </li>
        <br>
        <li style="list-style: initial">
          <span class="editor_title_bold">Flashcards.</span>
          Slide with hot zones where clicking leads to a ViSH slide, another complete excursions or to any Website or resource on the Internet.
          <a target="_blank" href="http://vishub.org/categories/57">(Flashcards examples)</a>
        </li>
        <br>
        <li style="list-style: initial">
          <span class="editor_title_bold">Virtual tours.</span>
          Smartcards where the background is a specific Google Map configuratión.
          <a target="_blank" href="http://vishub.org/categories/58">(Virtual tour examples)</a>
        </li>
        <br>
        <li style="list-style: initial">
          <span class="editor_title_bold">Enriched video.</span>
          A video with break points, where the video is stopped and a ViSH slide (explanation, quiz, etc.) is presented. The video continues when the slide is closed.
          <a target="_blank" href="http://vishub.org/categories/59">(Enriched videos examples)</a>
        </li>
        <br>
        <li style="list-style: initial">
          <span class="editor_title_bold">Web Apps.</span>
          Interactive HTML5 Web apps to be inserted as an active component in a ViSH slide, such as interactive calculators, animations, simulators, virtual labs, etc.
          <a target="_blank" href="http://vishub.org/categories/60">(Web Apps examples)</a>
          . HTML5 Web apps are created using standard HTML, CSS and JavaScript exactly in the same way as standard HTML5 client side applications are created.
        </li>
      </ul>
      <br>
      <div id="overview4" class="header_text margin-top10">
        Each excursion can be complemented with pedagogical information describing appropriate teaching scenarios, teaching guidelines, specific requirements,
        preparation tasks or simply ideas or feedback about the use of excursions in class.
      </div>
      <br>

      <div class="header_text margin-top10">
        <br>
        <legend>Uploading resources from mobiles and tablets</legend>
      </div>
      <div class="header_text margin-top10">
        ViSH and the virtual excursions have been designed in HTML5 to allow flexible ways of uploading resources from mobile devices.
        Pictures or videos taken with a mobile or tablet can be uploaded to the ViSH repository very easily.
      </div>
      <br>
      <div id="overview5" class="header_text margin-top10">
        Just by accesing the ViSH with the browser of the smartphone or tablet, and selecting the resource upload function to do upload a picture or video taken on the fly or stored in the repository.
        After the resource has been uploaded in the repository, any excursions can use it.
      </div>
      <br>

      <div class="header_text margin-top10">
        <br>
        <legend>Cloning virtual excursions</legend>
      </div>
      <div class="header_text margin-top10">
        One of the main goals of the ViSH is enabling collaborative content production.
        The basic mechanism for enriching or adapting an excursion somebody has produced is cloning.
        Therefore any excursion published in the ViSH can be cloned by other registered users for enrichment, modification,
        translation into another language or whatever.
      </div>
      <br>
      <div class="header_text margin-top10">
        Excursions are published in the ViSH with a creative commons non-commercial alike license,
        where others have the right to use and modify the excursions for non-commercial purposes.
        ViSH is contribution friendly and each excursion makes the authors of the cloning chain explicit,
        such that all who have contributed to a given excursion receive their recognition.
      </div>
      <br>
      <div id="overview6" class="header_text margin-top10">
        When a user clones a given excursion a copy is made in the excursion area of his profile.
        The author of the cloned excursion and previous authors contributing to it, are added to the section “with content from”,
        such that authorship is properly recognized. The user becomes the owner of the cloned copy and can edit it as needed with the editor.
      </div>
      <br>

      <div class="header_text margin-top10">
        <br>
        <legend>Importing and exporting excursions.</legend>
      </div>
      <div class="header_text margin-top10">
        PDF presentations can be imported into an excursion to create new slides,
        which have the PDF slide as a background and where other elements can be added.
      </div>
      <br>
      <div class="header_text margin-top10">
          Excursions can also be imported and exported as SCORM objects. SCORM exported excursions can be imported in LMSs and other platforms supporting the standard.
          Excursions can also be accessed via an URL or embedded in Web pages, blogs or LMSs (Moodle, ..) like YouTube videos.
      </div>
      <br>
      <div class="header_text margin-top10">
        Downloading of excursions for off-line presentation in a classroom or meeting is under development using the HTML5 offline mode.
        Excursions will only be enabled for off-line presentation, if all the resources the use can be cached in the client, i.e.
        if they are hosted in the ViSH local repository. Downloading of excursions as a set of PDF slides, but loosing all the active multimedia content of the excursion, is also under study.
      </div>
      <br>

      <div id="overview7" class="header_text margin-top10">
        <br>
        <legend>Virtual meetings and events with remote and mobile access.</legend>
      </div>
      <div class="header_text margin-top10">
        ViSH uses
        <a target="_blank" href="http://www.mashme.tv">MashMe.tv</a>
        to implement a virtual classroom based on collaborative videoconferencing,
        where several classrooms in different schools can connect and participate in a virtual event with live demonstrations, discussions,
        remote lecture delivery, etc. These meetings can be based on excursions or on other social media available on the Internet.
      </div>
      <br>
      <div class="header_text margin-top10">
        MashMe.tv supports access to the webinar rooms from desktops, smartphones and tablets.
        The webcam of a mobile device can be used to show the physical place being visited, the expositions of a museum,
        to interview people at the visited site or the result of a scientific experiment (telescope, microscope, accelerator, etc.)
        directly on the scientific infrastructure. Mobile devices can be used to walk freely around the visited site and show the most relevant parts of it.
      </div>
      <br>
    </div>
  </div>
</section>
